<template>
	<div>
		<div
			class="main"
			ref="target"
			style="width: 600px; height: 400px"
		></div>
	</div>
</template>

<script setup>
import echarts from 'echarts';
import { ref, onMounted } from 'vue';
const target = ref(null);
let myChart;
onMounted(() => {
	myChart = echarts.init(target.value, 'light');
	renderChart();
});

const renderChart = () => {
	const data = {
		categories: ['音乐', '书法课', '羽毛球培训','语文(张倩)','篮球班','体育(李鹏)','趣学硬笔书法','舞蹈课','数学(张密珍)','数学思维','赠送','美术课','绘画课','创意美术'],
		values: [2, 2,2,3,3,4,5,10,12,15,15,15,30,30]
	};

	const options = {
		color:'#96D6FF',
		xAxis: {
			type: 'value'
		},
		yAxis: {
			type: 'category',
			data: data.categories
		},
		series: [
			{
				type: 'bar',
				data: data.values
			}
		]
	};
	myChart.setOption(options);
};
</script>